<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-shared-lib/core-shared-lib.html">

<!--
Dynamically loads the Google Maps JavaScript API, firing the `api-load` event when ready.

#### Example

    <google-maps-api apiKey="abc123" version="3.exp"></google-maps-api>
    <script>
      var mapsAPI = document.querySelector('google-maps-api');
      mapsAPI.addEventListener('api-load', function(e) {
        // this.api === google.maps
      });
    </script>

Any number of components can use `<google-maps-api>` elements, and the library will only be loaded once.

@element google-maps-api
@blurb Element wrapper around Google Maps API.
@homepage github.io
@extends core-shared-lib
-->
<!--
Fired when the Maps API library is loaded and ready.

@event api-load
-->

<polymer-element name="google-maps-api" extends="core-shared-lib" attributes="version apiKey clientId libraries">
<script>

  Polymer({

    defaultUrl: '//maps.dushu.hu/maps/api/js?callback=%%callback%%',

    /**
     * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key.
     *
     * @attribute apiKey
     * @type string
     */
    apiKey: null,

   /**
     * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see developers.google.com/maps/documentation/business/.
     * If set, a Client ID will take precedence over an API Key.
     *
     * @attribute clientId
     * @type string
     */
    clientId: null,

    /**
     * The libraries to load with this api. Defaults to "places", but an example
     * value might be, "places,geometry"
     * see developers.google.com/maps/documentation/javascript/libraries
     *
     * @attribute libraries
     * @type string
     */
    libraries: "places",

    /**
     * Version of the Maps API to use.
     *
     * @attribute version
     * @type string
     * @default '3.exp'
     */
    version: '3.exp',

    notifyEvent: 'api-load',

    ready: function() {
      var url = this.defaultUrl + '&v=' + this.version;
      url += "&libraries=" + this.libraries;
      if (this.apiKey && !this.clientId) {
        url += '&key=' + this.apiKey;
      }
      if (this.clientId) {
        url += '&client=' + this.clientId;
      }
      this.url = url;
    },

    /**
     * Provides the google.maps JS API namespace.
     *
     * @property api
     * @type google.maps
     */
    get api() {
      return google.maps;
    }
  });
</script>
</polymer-element>
